<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="container">
    <h3 align="center">设置模态框大小</h3>
    <!-- 大尺寸模态框 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
        data-bs-target=".example-modal-lg">大尺寸模态框</button>
    <div class="modal example-modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">大尺寸模态框</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">莫笑农家腊酒浑，丰年留客足鸡豚。</div>
                <div class="modal-body">山重水复疑无路，柳暗花明又一村。</div>
            </div>
        </div>
    </div>
    <!-- 小尺寸模态框 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal"
        data-bs-target=".example-modal-sm">小尺寸模态框</button>
    <div class="modal example-modal-sm">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">小尺寸模态框</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">箫鼓追随春社近，衣冠简朴古风存。</div>
                <div class="modal-body">从今若许闲乘月，拄杖无时夜叩门。</div>
            </div>
        </div>
    </div>


</body>

</html>